<template>
  <header class="header">
    <Left></Left>
    <Center
      :word="word"
      :searchHide="searchHide"
      :hotSearchLists="hotSearchLists"
      :searchWords="searchWords"
      :isFocus="isFocus"
      @changeWord="word = $event"
      @changeSearchWords="searchWords = $event"
      @changeSearchHide="searchHide = $event"
      @changeHotSearchLists="hotSearchLists = $event"
      @changeIsFocus="isFocus = $event"
    ></Center>
    <Right :userInfo="userInfo" @changeUserInfo="changeUserInfo" @changeIsHide='isHide = $event' :isHide='isHide'></Right>
    <AlerUserInfo :isHide='isHide' :userInfo='userInfo' @changeUserInfo='changeUserInfo'></AlerUserInfo>
    <SearchBox
      :searchHide="searchHide"
      :isFocus="isFocus"
      :hotSearchLists="hotSearchLists"
      :searchWords="searchWords"
      :word="word"
    ></SearchBox>
  </header>
</template>

<script>
import axios from "@/utils/axios";
import SearchBox from "./search/SearchBox";
import Left from "./header/Left";
import Center from "./header/Center";
import Right from "./header/Right";
import AlerUserInfo from "./header/AlerUserInfo";
export default {
  name: "Header",
  data() {
    return {
      
      userInfo: {
        avatarUrl:
          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2258616609,4181715650&fm=26&gp=0.jpg",
        nickName: "未登录",
      },
      isHide: true,
      hotSearchLists: [],
      searchWords: [],
      searchHide: true,
      isFocus: true,
      word: "",
    };
  },
  components: {
    SearchBox,
    Left,
    Center,
    Right,
    AlerUserInfo
  },
  methods: {
    changeUserInfo(e) {
      this.userInfo = e;
    },
   
  },
  mounted() {
    document.addEventListener("click", (e) => {
      const classList = e.target.classList;
      if (!classList.contains("user-info")) {
        this.isHide = true;
      }
      if (
        !classList.contains("search-result") &&
        e.target.tagName !== "INPUT"
      ) {
        this.searchHide = true;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  display: flex;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  height: 7rem;
  padding: 2rem;
  background: #eb4240;

  .user-info {
    position: absolute;
    top: 7rem;
    right: 22rem;
    width: 24rem;
    height: 13rem;
    padding: 0 1rem 1rem;
    background: #fff;
    .info {
      display: flex;
      align-items: center;
      padding: 1rem;
      height: 6rem;
      .item {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 8rem;
        height: 100%;
        .count {
          font-size: 1.8rem;
          font-weight: bold;
        }
      }
    }
  }
  .user-info.hide {
    display: none;
  }
}
</style>